import styled from 'styled-components'
import { useDispatch } from 'react-redux'
import { updateStateAction } from '../store/actions/cart.js'

const Wrapper = styled.div`
  padding: 5px;
  display: flex;
  .form-check-input {
    margin-top: 38px;
  }

  img {
    width: 100px;
    height: 100px;
    background-color: #efefef;
    margin-right: 5px;
  }

  .right {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .title {
      font-weight: bold;
    }
    .bottom {
      display: flex;
      justify-content: space-between;
      .price {
        color: red;
        font-weight: bold;
      }
    }
  }
`

export default function Goods(props) {
  const dispatch = useDispatch()

  return (
    <Wrapper>
      {/* 左侧 */}
      <div className="form-check left">
        <input
          className="form-check-input"
          type="checkbox"
          id={props.id}
          checked={props.goods_state}
          onChange={e => dispatch(updateStateAction({ id: props.id, value: e.target.checked }))}
        />
        <label className="form-check-label" htmlFor={props.id}>
          <img src={props.goods_img} alt="" />
        </label>
      </div>

      {/* 右侧 */}
      <div className="right">
        <div className="title">{props.goods_name}</div>
        <div className="bottom">
          <span className="price">￥{props.goods_price}</span>
          {props.children}
        </div>
      </div>
    </Wrapper>
  )
}
